<template>
    <div class="questionAnswerManagementCont">
      <div class="newArticleStyle">
        <Button type="primary" @click="questionFun('add')">新增问答</Button>
      </div>
      <Table :loading="loading" ref="TableHeight" :max-height="onresizeHeight" :columns="columns1" :data="data1"></Table>
      <!-- 分页 -->
      <div class="pagePublicStyle" v-show="pageData.total > 0">
        <div class="totalCount">
          当前第 {{pageData.page}} 页，
          当前第 {{(pageData.page-1)*pageData.rows+1}} 条到第 {{pageData.page*pageData.rows>pageData.total?pageData.total:pageData.page*pageData.rows}} 条，
          共 {{pageData.total}} 条
        </div>
        <Page class="pager" :total="pageData.total" :pageSize="pageData.rows" :current="pageData.page" :page-size-opts="pageData.pageSizeOpts" @on-change="pageOnChangeFun" @on-page-size-change="pageOnPageSizeChangeFun" placement="top" show-elevator show-sizer />
      </div>
      <!-- table 头部筛选 -->
      <table_filter :options="options" @cancelFilterFun="cancelFilterFun" @okFilterFun="okFilterFun"></table_filter>
    </div>
</template>
<script>
  import table_filter from '@/components/table_filter'
  import { faqsList, faqsDelete, faqsReason } from "@/api/materialManagement.js";
  import Helper from "@/common/helper.js";
  export default {
    components: {
      table_filter
    },
    data() {
        return {
          loading: false,
          onresizeHeight: 0,
          pageData: {
            total: 0,
            page: 1,
            rows: 14,
            pageSizeOpts: [20, 30, 40, 50]
          },
          questionTypeList: ['-','产品使用', '政策行情', '法务知识', '楼盘问答', '其它'],
          auditStatusList: ['-','已通过', '已驳回', '待审核'],
          options: {
            type: '',   // form类型  Input / DatePicker / Checkbox / Select / 操作配置头部
            placeholder: '',  // 提示语
            left: -1000,    // 弹框fixed => left
            iconLeft: 0,  // 弹框icon => left
            top: -1000,    // 弹框fixed => top
            width: 218,   // 弹框fixed => top
            setTimeout: null,    // 鼠标离开三角形 200毫秒 关闭弹框
            problemDescription: '',
            approvalStatus: '-1',
            approvalStatusList: [{name: '展示全部', val: '-1'}, {name: '已通过', val: '1'}, {name: '已驳回', val: '2'}, {name: '待审核', val: '3'}],
            creationTimeVal: '',
            selectSearchId: ''
          },
          columns1: [
            {
              title: '问题描述',
              key: 'questionDesc',
              minWidth: 160,
              render: (h, params) => {
                return h("div", [
                  h(
                    "span",
                    {
                      style: {
                        display: "inline-block",
                        width: "100%",
                        overflow: "hidden",
                        textOverflow: "ellipsis",
                        whiteSpace: "nowrap"
                      },
                      domProps: {
                        title: params.row.questionDesc
                      }
                    },
                    params.row.questionDesc
                  )
                ]);
              },
              renderHeader: (h, params) => {
                return h('div',[
                  h('span', {}, '问题描述'),
                  h('Icon', {
                    props: {
                      type: 'ios-arrow-down',
                      size: '16'
                    },
                    style: {
                      marginLeft: '5px'
                    },
                    nativeOn: {
                      'mouseover': (event) => {
                        event.stopPropagation();
                        this.thMouseoverFun(event, 'input-problemDescription', '请输入问题描述', 218);
                      },
                      'mouseleave': (event) => {
                        event.stopPropagation();
                        this.thMouseoutFun();
                      }
                    }
                  })
                ])
              }
            },
            {
              title: '问题分类',
              key: 'questionType',
              minWidth: 120,
              render: (h, params) => {
                return h('div', (params.row.questionType && this.questionTypeList[params.row.questionType]) || '-');
              }
            },
            {
              title: '审核状态',
              key: 'auditStatus',
              minWidth: 120,
              render: (h, params) => {
                return h('div',  (params.row.auditStatus && this.auditStatusList[params.row.auditStatus]) || '-');
              },
              renderHeader: (h, params) => {
                return h('div',[
                  h('span', {}, '审核状态'),
                  h('Icon', {
                    props: {
                      type: 'ios-arrow-down',
                      size: '16'
                    },
                    style: {
                      marginLeft: '5px'
                    },
                    nativeOn: {
                      'mouseover': (event) => {
                        event.stopPropagation();
                        this.thMouseoverFun(event, 'Select-approvalStatus-approvalStatusList', '请选择审核状态', 200);
                      },
                      'mouseleave': (event) => {
                        event.stopPropagation();
                        this.thMouseoutFun();
                      }
                    }
                  })
                ])
              }
            },
            {
              title: '创建时间',
              key: 'createTime',
              minWidth: 180,
              render: (h, params) => {
                return h('div',  params.row.createTime || '-');
              },
              renderHeader: (h, params) => {
                return h('div',[
                  h('span', {}, '创建时间'),
                  h('Icon', {
                    props: {
                      type: 'ios-arrow-down',
                      size: '16'
                    },
                    style: {
                      marginLeft: '5px'
                    },
                    nativeOn: {
                      'mouseover': (event) => {
                        event.stopPropagation();
                        this.thMouseoverFun(event, 'datePicker-creationTimeVal-datetimerange', '请选择创建时间', 360);
                      },
                      'mouseleave': (event) => {
                        event.stopPropagation();
                        this.thMouseoutFun();
                      }
                    }
                  })
                ])
              }
            },
            {
              title: '创建人',
              key: 'creater',
              minWidth: 120,
              render: (h, params) => {
                return h('div',  params.row.creater || '-');
              },
              renderHeader: (h, params) => {
                return h('div',[
                  h('span', {}, '创建人'),
                  h('Icon', {
                    props: {
                      type: 'ios-arrow-down',
                      size: '16'
                    },
                    style: {
                      marginLeft: '5px'
                    },
                    nativeOn: {
                      'mouseover': (event) => {
                        event.stopPropagation();
                        this.thMouseoverFun(event, 'AutoComplete-selectSearchId', '请搜索选择创建人', 218);
                      },
                      'mouseleave': (event) => {
                        event.stopPropagation();
                        this.thMouseoutFun();
                      }
                    }
                  })
                ])
              }
            },
            {
              title: '操作',
              key: 'address',
              fixed: 'right',
              width: 180,
              align: 'center',
              render: (h, params) => {
                return h('div', [
                  h('a', {
                    style: {
                      marginRight: "10px",
                      display: params.row.auditStatus == '3' || params.row.auditStatus == '1' ? 'inline-block' : 'none'
                    },
                    on: {
                      click: (e) => {
                        e.stopPropagation();
                        this.questionFun('view', params.row);
                      }
                    }
                  }, '查看'),
                  h('a', {
                    style: {
                      marginRight: "10px",
                      display: params.row.auditStatus == '2' ? 'inline-block' : 'none'
                    },
                    on: {
                      click: (e) => {
                        e.stopPropagation();
                        this.viewReason(params.row);
                      }
                    }
                  }, '查看原因'),
                  h('a', {
                    style: {
                      marginRight: "10px"
                    },
                    on: {
                      click: (e) => {
                        e.stopPropagation();
                        this.questionFun('edit', params.row);
                      }
                    }
                  }, '编辑'),
                  h('a', {
                    on: {
                      click: (e) => {
                        e.stopPropagation();
                        this.deleteFun(params.row);
                      }
                    }
                  }, '删除')
                ]);
              }
            }
          ],
          data1: []
        }
    },
    methods: {
      // table 鼠标移到三角形事件
      thMouseoverFun(event, type, placeholder, width) {
        this.options.type = type
        this.options.placeholder = placeholder
        this.options.left = event.currentTarget.getBoundingClientRect().left - (width/2 - 5) <= 200 ? 200 : (event.currentTarget.getBoundingClientRect().left - (width/2 - 5) + width) > document.documentElement.clientWidth ? (document.documentElement.clientWidth - width) : event.currentTarget.getBoundingClientRect().left - (width/2 - 5)
        this.options.iconLeft = event.currentTarget.getBoundingClientRect().left
        this.options.top = event.currentTarget.getBoundingClientRect().top + 24
        this.options.width = width
      },
      // table 鼠标离开三角形事件
      thMouseoutFun() {
        this.options.setTimeout = setTimeout(() => {
          this.options.left = -1000
          this.options.top = -1000
        },100)
      },
      // table from 取消事件
      cancelFilterFun(options) {
        this.initData();
      },
      // table from 确定事件
      okFilterFun(options) {
        this.initData();
      },
      // 分页 页码改变事件
      pageOnChangeFun(page) {
        this.pageData.page = page;
        this.initData();
      },
      // 分页 每页条数改变事件
      pageOnPageSizeChangeFun(rows) {
        this.pageData.rows = rows;
        this.pageData.page = 1;
        this.initData();
      },
      // 初始化获取数据
      initData() {
        this.loading = true
        let params = {
          page: this.pageData.page,
          rows: this.pageData.rows,
          auditStatus: this.options.approvalStatus == '-1' ? '' : this.options.approvalStatus,
          questionDesc: this.options.problemDescription,
          startTime: (this.options.creationTimeVal && this.options.creationTimeVal[0] && Helper.timestampToTime(this.options.creationTimeVal[0])) || '',
          endTime: (this.options.creationTimeVal && this.options.creationTimeVal[1] && Helper.timestampToTime(this.options.creationTimeVal[1])) || '',
          createrId: this.options.selectSearchId
        }
        faqsList(params).then(res=>{
          this.loading = false
          if (res && res.list) {
            this.data1 = res.list
            this.pageData.total = Number(res.total)
            this.$nextTick(() => {
              this.onresizeHeight = window.innerHeight - this.$refs.TableHeight.$el.offsetTop - 100
            });
          } else {
            this.pageData.total = 0
            this.data1 = []
          }
        }).catch(err=>{
          this.loading = false
          this.$Message.error(err)
        })
      },
      // 新增问答
      questionFun(type, row) {
        if (type == 'add') {
          this.$router.push({path:'/operationsCenter/materialManagement/questionAnswerManagement/addEditQuestionAnswerPage', query:{type: 'add'}});
        } else if(type == 'edit') {
          this.$router.push({path:'/operationsCenter/materialManagement/questionAnswerManagement/addEditQuestionAnswerPage', query:{type: 'edit', questionAnswerId: row.questionAnswerId}});
        } else if(type == 'view') {
          this.$router.push({path:'/operationsCenter/materialManagement/questionAnswerManagement/viewQuestionAnswerPage', query:{type: 'view', questionAnswerId: row.questionAnswerId}});
        }
      },
      // 查看原因
      viewReason(rows) {
        faqsReason({questionAnswerId: rows.questionAnswerId}).then(res=>{
          this.$Modal.info({
            title: '驳回原因',
            content: res || '-',
            okText: '关闭'
          });
        }).catch(err=>{
          this.$Message.error(err)
        })
      },
      // 删除
      deleteFun(rows) {
        this.$Modal.confirm({
          title: '删除',
          content: '确定删除吗？',
          onOk: () => {
            faqsDelete({questionAnswerId: rows.questionAnswerId}).then(res=>{
              this.$Message.success('问答删除成功！');
              this.initData()
            }).catch(err=>{
              this.$Message.error(err)
            })
          }
        });
      }
    },
    computed: {

    },
    created() {
      // 初始化获取数据
      this.initData()
    },
    mounted() {
      window.onresize = () => {
        return (() => {
          setTimeout(() => {
            this.onresizeHeight = window.innerHeight - this.$refs.TableHeight.$el.offsetTop - 100
          }, 10);
        })();
      };
    },
    watch: {},
  }
</script>
<style lang="scss" scoped>
  .questionAnswerManagementCont{
    .newArticleStyle{
      padding: 10px 14px;
    }
  }
  /* page */
  .pagePublicStyle {
    width: 100%;
    margin: 14px 0;
    height: 32px;
    .totalCount {
      position: absolute;
      height: 32px;
      line-height: 32px;
      display: inline-block;
      vertical-align: top;
      color: #657180;
    }
    .pager {
      display: inline-block;
      vertical-align: top;
      position: absolute;
      right: 20px;
      background-color: #fff;
      padding-left: 50px;
    }
  }
</style>
